<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">投放对比数据对比图</div>
              <div class="layui-card-body">
                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="zhanbi">
                  <div carousel-item id="zhanbi">
                    <div class="duibi"><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief layadmin-latestData">
                  <div class="layui-card-header">折线分析图</div>
                  <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="shishi">
                      <div carousel-item id="shishi">
                        <div class="zhexian"><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">投放对比数据趋势图</div>
              <div class="layui-card-body">
                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="qushi">
                  <div carousel-item id="qushi">
                    <div class="qushi"><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['admin', 'carousel'], function(){
        var $ = layui.$,
        carousel = layui.carousel,
        device = layui.device();

        //轮播切换
        $('.layadmin-carousel').each(function(){
            var othis = $(this);
            carousel.render({
                elem: this,
                width: '100%',
                arrow: 'none',
                interval: othis.data('interval'),
                autoplay: othis.data('autoplay') === true,
                trigger: (device.ios || device.android) ? 'click' : 'hover',
                anim: othis.data('anim')
            });
        });

        // 投放对比数据对比图
        var duibi = echarts.init(document.querySelector(".duibi"));
        var option1 = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {},
            series: [
              {
                type: 'bar',
                data:[220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290]
              },
              {
                type: 'bar',
                data:[130, 210, 140, 320, 260, 190, 220, 200, 240, 280, 320, 450]
              }
            ]
        };
        duibi.setOption(option1);

        // 折线分析图
        var zhexian = echarts.init(document.querySelector(".zhexian"));
        var option2 = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {},
            series: [
              {
                type: 'line',
                data:[220, 182, 191, 234, 290, 330]
              },
              {
                type: 'line',
                data: [310, 220, 182, 191, 234, 290]
              }
            ]
        };
        zhexian.setOption(option2);

        // 折线分析图
        var qushi = echarts.init(document.querySelector(".qushi"));
        var option3 = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {},
            series: [
              {
                type: 'line',
                data:[220, 182, 191, 234, 290, 330]
              },
              {
                type: 'line',
                data: [310, 220, 182, 191, 234, 290]
              }
            ]
        };
        qushi.setOption(option3);
    });
</script>